<template>
  <PrintBox
    :printRow="printList"
    :isVertical="false"
    :isPageSize="false"
    id="printBoxCheckAsk"
  >
    <template slot="title" slot-scope="scope">
      <div style="margin-bottom: 20px">仪器设备计量检定要求表 STET/B/22-6</div>
    </template>
    <template slot-scope="scope">
      <!-- 表格  class  table-page  必须-->
      <table
        style="border-collapse: collapse"
        border="1"
        cellspacing="0"
        class="table-page"
        :isVertical="false"
      >
        <tr class="table_header">
          <td rowspan="2" colspan="2" style="width: 20mm">设备名称</td>
          <td rowspan="2" style="width: 20mm">设备型号</td>
          <td rowspan="2" style="width: 20mm">设备编号</td>
          <td rowspan="1" colspan="3" style="width: 20mm">对应设备检备编码</td>
          <td rowspan="2" style="width: 20mm">溯源方式</td>
          <td rowspan="2" style="width: 20mm">检定/校准有效期(月)</td>
          <td rowspan="2" style="width: 20mm">所属部门</td>
          <td rowspan="2" style="width: 20mm">位置</td>
        </tr>
        <tr>
          <td>公路工程（交办安监 [2019]166号）</td>
          <td>水运工程（交办安监 [2018]33号）</td>
          <td style="width: 20mm">建设工程</td>
        </tr>
        <tr>
          <td colspan="2">{{ scope.item.deviceName }}</td>
          <td>{{ scope.item.spec }}</td>
          <td>{{ scope.item.deviceCode }}</td>
          <td>{{ scope.item.highway }}</td>
          <td>{{ scope.item.water }}</td>
          <td>{{ scope.item.build }}</td>
          <td>
            {{ checkDict(dict.type.sys_trace_method, scope.item.traceMethod) }}
          </td>
          <td>{{ scope.item.checkPeriod }}</td>
          <td>{{ scope.item.deptName }}</td>
          <td>
            {{ checkDict(dict.type.sys_site_list, scope.item.site) }}
          </td>
        </tr>
        <tr style="padding: 0">
          <td style="padding: 0" colspan="2">设各检定/校准测试标准</td>
          <td colspan="9">{{ scope.item.checkRule }}</td>
        </tr>
        <tr style="padding: 0">
          <td style="padding: 0" colspan="2">附加说明（试验规程）</td>
          <td colspan="9">{{ scope.item.otherExplain }}</td>
        </tr>
        <tr style="padding: 0">
          <td style="padding: 0" colspan="2">对应参数</td>
          <td colspan="9">{{ scope.item.param }}</td>
        </tr>
        <tr style="padding: 0">
          <td style="padding: 0" colspan="2">设备用途</td>
          <td colspan="9">{{ scope.item.useInfo }}</td>
        </tr>
        <tr>
          <td rowspan="4" style="width: 5mm; padding: 2mm; line-height: 13px">
            检验参数
          </td>
          <td rowspan="2">规定项</td>
          <td>首检</td>
          <td colspan="8">{{ scope.item.fixFirst }}</td>
        </tr>
        <tr>
          <td>后续检查</td>
          <td colspan="8">{{ scope.item.fixNext }}</td>
        </tr>
        <tr>
          <td rowspan="2">必检项</td>
          <td>首检</td>
          <td colspan="8">{{ scope.item.mustFirst }}</td>
        </tr>
        <tr>
          <td>后续检定</td>
          <td colspan="8">{{ scope.item.mustNext }}</td>
        </tr>
        <tr>
          <td rowspan="2" style="width: 5mm; padding: 2mm; line-height: 13px">
            检定点要求
          </td>
          <td colspan="2">规范中有明确要求</td>
          <td colspan="8">{{ scope.item.request }}</td>
        </tr>
        <tr>
          <td colspan="2">无明确要求自行确定的</td>
          <td colspan="8">{{ scope.item.custom }}</td>
        </tr>
        <tr>
          <td colspan="3">其他要求</td>
          <td colspan="8">{{ scope.item.otherRequest }}</td>
        </tr>
        <tr>
          <td colspan="11">
            <div style="display: flex; justify-content: end">
              <div style="width: 50mm; position: relative">
                填报人签名：
                <img
                  style="width: 50px; position: absolute"
                  :src="$VUE_APP_IMG_API + scope.item.esign"
                />
              </div>
              <div style="width: 50mm">
                日期：{{ checkHistoryNode(scope, "start").endTime }}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="11">
            <div>
              <div
                style="display: flex; align-items: center; position: relative"
              >
                检测部负责人意见：
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 150px;
                    text-align: left;
                  "
                >
                  <template v-if="CheckApprove(scope, 'jcbmfzr').ShowMessage">
                    {{ CheckApprove(scope, "jcbmfzr").MessageText }}
                  </template>
                </div>
                <div style="display: flex; align-items: center">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      width: 55mm;
                      margin-left: 10mm;
                    "
                  >
                    <input
                      type="checkbox"
                      :checked="
                        checkHistoryNodeComment(scope, 'jcbmfzr').type == 1
                      "
                    />同意
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      width: 55mm;
                      margin-left: 10mm;
                    "
                  >
                    <input
                      type="checkbox"
                      :checked="
                        checkHistoryNodeComment(scope, 'jcbmfzr').type == 3
                      "
                    />不同意
                  </div>
                </div>
              </div>
              <div style="display: flex; justify-content: end">
                <div style="width: 41mm; position: relative">
                  签名：
                  <template v-if="CheckApprove(scope, 'jcbmfzr').ShowImg">
                    <img
                      style="width: 80px; position: absolute; top: -10px"
                      :src="CheckApprove(scope, 'jcbmfzr').ApproveImg"
                    />
                  </template>
                </div>
                <div style="width: 50mm">
                  日期：
                  {{ checkHistoryNode(scope, "jcbmfzr").endTime }}
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="11">
            <div>
              <div
                style="display: flex; align-items: center; position: relative"
              >
                技术负责人意见：
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 150px;
                    text-align: left;
                  "
                >
                  <template v-if="CheckApprove(scope, 'jsfzr').ShowMessage">
                    {{ CheckApprove(scope, "jsfzr").MessageText }}
                  </template>
                </div>
                <div style="display: flex; align-items: center">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      width: 55mm;
                      margin-left: 13mm;
                    "
                  >
                    <input
                      type="checkbox"
                      :checked="
                        checkHistoryNodeComment(scope, 'jsfzr').type == 1
                      "
                    />同意
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      width: 55mm;
                      margin-left: 10mm;
                    "
                  >
                    <input
                      type="checkbox"
                      :checked="
                        checkHistoryNodeComment(scope, 'jsfzr').type == 3
                      "
                    />不同意
                  </div>
                </div>
              </div>
              <div style="display: flex; justify-content: end">
                <div style="width: 41mm; position: relative">
                  签名：
                  <template v-if="CheckApprove(scope, 'jsfzr').ShowImg">
                    <img
                      style="width: 80px; position: absolute; top: -10px"
                      :src="CheckApprove(scope, 'jsfzr').ApproveImg"
                    />
                  </template>
                </div>
                <div style="width: 50mm">
                  日期：{{ checkHistoryNode(scope, "jsfzr").endTime }}
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <!-- 底部信息位置 -->
      <div class="page-bottom" style="page-break-after: always">
        <div class="desc">注：本表格自2021年6月1日起生效</div>
      </div>
    </template>
  </PrintBox>
</template>
<script>
import printStyle from "@/utils/print.js";
import { deviceCheckAskInfo } from "@/api/device/deviceCheckAsk.js";

export default {
  dicts: [
    "sys_device_type",
    "sys_device_content",
    "sys_trace_method",
    "sys_site_list",
  ],
  data() {
    return {
      printList: [],
      formData: {},
    };
  },
  methods: {
    getinfo(id) {
      return deviceCheckAskInfo(id).then((response) => {
        this.formData = response.data;
      });
    },

    async printBox(e) {
      await this.getinfo(e);
      //infos  勾选的数据 如果有勾选就打印勾选。
      this.printList = [this.formData];
      setTimeout(() => {
        document.title = "仪器设备计量检定要求表 STET/B/22-6";
        this.$print({
          printable: "printBoxCheckAsk", //打印区域id
          type: "html", //打印类型是html
          scanStyles: false,
          targetStyles: ["*"],
          style: this.workStyle(),
          onPrintDialogClose: () => {
            document.title = process.env.VUE_APP_TITLE;
          },
        });
      }, 500);
    },
    workStyle() {
      return `${printStyle}
        table,
        table tr th,
        table tr td {
          padding: 4px;
        }
        .desc{
        text-align: left; font-size: 12px; margin-top: 10px
      }
            .df {
                display: flex;
              }
      `;
    },
  },
};
</script>
